<template>
    <view class="record-container">
        <!-- 记录列表 -->
        <view class="record-list">
            <view 
                class="record-item" 
                v-for="(record, index) in records" 
                :key="index"
                @click="viewDetail(record.id)"
            >
                <view class="doctor-info">
                    <image class="avatar" :src="record.doctor.avatar" mode="aspectFill"></image>
                    <view class="info">
                        <view class="name-row">
                            <text class="name">{{record.doctor.name}}</text>
                            <text class="title">{{record.doctor.title}}</text>
                        </view>
                        <text class="hospital">{{record.doctor.hospital}}</text>
                    </view>
                </view>
                <view class="consult-info">
                    <view class="time">{{record.time}}</view>
                    <view class="duration">咨询时长：{{record.duration}}分钟</view>
                </view>
                <view class="summary">
                    <text class="label">咨询摘要：</text>
                    <text class="content">{{record.summary}}</text>
                </view>
                <view class="unread" v-if="record.unread">
                    <u-badge :value="record.unread" type="error"></u-badge>
                </view>
            </view>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-if="records.length === 0">
            <u-empty text="暂无咨询记录" mode="list"></u-empty>
        </view>
        
        <!-- 加载更多 -->
        <view class="load-more" v-if="hasMore">
            <u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore>
        </view>
    </view>
</template>

<script>
import request from '@/util/request'

export default {
    data() {
        return {
            records: [
                {
                    id: 1,
                    doctor: {
                        name: '张医生',
                        title: '主任医师',
                        hospital: '北京协和医院',
                        avatar: '/static/images/doctor1.jpg'
                    },
                    time: '2023-12-15 14:30',
                    duration: 25,
                    summary: '咨询了头晕症状，医生建议进行相关检查',
                    unread: 2
                },
                {
                    id: 2,
                    doctor: {
                        name: '李医生',
                        title: '副主任医师',
                        hospital: '上海华山医院',
                        avatar: '/static/images/doctor2.jpg'
                    },
                    time: '2023-12-10 09:15',
                    duration: 15,
                    summary: '咨询了康复训练计划，医生提供了详细的建议',
                    unread: 0
                }
            ],
            page: 1,
            pageSize: 10,
            hasMore: true,
            loadStatus: 'loadmore'
        }
    },
    methods: {
        async loadRecords() {
            try {
                const res = await request.get('/api/consultation/records', {
                    params: {
                        page: this.page,
                        pageSize: this.pageSize
                    }
                })
                
                if (res.code === 200) {
                    if (this.page === 1) {
                        this.records = res.data.list
                    } else {
                        this.records = [...this.records, ...res.data.list]
                    }
                    
                    this.hasMore = res.data.hasMore
                    this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        async loadMore() {
            if (!this.hasMore) return
            
            this.loadStatus = 'loading'
            this.page++
            await this.loadRecords()
        },
        
        viewDetail(id) {
            uni.navigateTo({
                url: `/pages/consultation/detail?id=${id}`
            })
        }
    },
    onLoad() {
        this.loadRecords()
    },
    onPullDownRefresh() {
        this.page = 1
        this.loadRecords().finally(() => {
            uni.stopPullDownRefresh()
        })
    }
}
</script>

<style lang="less" scoped>
.record-container {
    min-height: 100vh;
    background-color: #F8F8F8;
    padding: 20rpx;
    
    .record-list {
        .record-item {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            position: relative;
            
            .doctor-info {
                display: flex;
                margin-bottom: 20rpx;
                
                .avatar {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50rpx;
                    margin-right: 20rpx;
                }
                
                .info {
                    flex: 1;
                    
                    .name-row {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10rpx;
                        
                        .name {
                            font-size: 32rpx;
                            font-weight: bold;
                            color: #333;
                            margin-right: 20rpx;
                        }
                        
                        .title {
                            font-size: 24rpx;
                            color: #666;
                        }
                    }
                    
                    .hospital {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
            
            .consult-info {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20rpx;
                padding: 20rpx 0;
                border-top: 2rpx solid #F8F8F8;
                border-bottom: 2rpx solid #F8F8F8;
                
                .time {
                    font-size: 28rpx;
                    color: #333;
                }
                
                .duration {
                    font-size: 28rpx;
                    color: #666;
                }
            }
            
            .summary {
                font-size: 28rpx;
                color: #666;
                line-height: 1.6;
                
                .label {
                    color: #333;
                    font-weight: bold;
                }
            }
            
            .unread {
                position: absolute;
                top: 30rpx;
                right: 30rpx;
            }
        }
    }
    
    .empty-state {
        padding: 100rpx 0;
    }
    
    .load-more {
        padding: 20rpx 0;
    }
}
</style> 